<template>
    <div>
        <div class="page">
            <div class="patientsList" >
                <div class="patName" v-for="(value, index) in patList" :key="index" @click="changePat(value)" :id="value">{{value}}</div>
            </div>
            <div class="talkPart">
                <div class="header">
                    {{chosen}}
                </div>
                <div class="mesPart">

                </div>
                <a-comment style="height:30vh; max-height:30vh">
                    <div slot="content">
                        <a-form-item style="height:18vh; max-height:18vh;margin-bottom:1vh;margin-right:1vh">
                            <a-textarea :rows="4" :value="mesvalue" @change="handleChange" style="height:18vh; max-height:18vh; min-height:18vh;margin-bottom:1vh"/>
                        </a-form-item>
                        <a-form-item>
                            <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit" style="margin-top:0">
                                发送消息
                            </a-button>
                        </a-form-item>
                    </div>
                </a-comment>
            </div>
        </div>
    </div>
    
</template>
<script>
export default {
    data(){
        return{
            patList:['李四','王五','陈钰岭','欧阳天翔','陈藏','夏家豪','周禄庭','刘梓康','郭宇轩','王璐娜','邱洋','史惠文','沈业栋','黄佳浩','张郑旭','王睿'],
            chosen:'',
            preChosen:'',
            mesList:[
                {'李四':
                    [{
                        'dir': 0,
                        'time': '2020-01-01 01:02:03',
                        'content': 'Hi, I\'m LiSi'
                    },
                    {
                        'dir': 0,
                        'time': '2020-01-01 01:02:04',
                        'content': 'What about you'
                    },
                    {
                        'dir': 1,
                        'time': '2020-01-01 01:02:04',
                        'content': 'Hello, I\'m ZhangSan'
                    }]
                },
                {'陈钰岭':
                    [{
                        'dir': 0,
                        'time': '2020-01-01 01:02:03',
                        'content': 'Hi, I am Mao'
                    },
                    {
                        'dir': 0,
                        'time': '2020-01-01 01:02:04',
                        'content': 'I have ED'
                    },
                    {
                        'dir': 1,
                        'time': '2020-01-01 01:02:04',
                        'content': 'Oh, what a pity'
                    }]
                },
            ],
            submitting: false,
            mesvalue: '',
        }
    },
    methods:{
        handleSubmit() {
            if (!this.mesvalue) {
                return;
            }
            this.submitting = true;
            setTimeout(() => {
                this.submitting = false;
                this.mesvalue = '';
            }, 1000);
        },
        handleChange(e) {
            this.mesvalue = e.target.value;
        },
        changePat(value){
            document.getElementById(this.preChosen).className = 'patName'
            this.chosen = value
            this.preChosen = value
            document.getElementById(value).className = 'patName_click'
        }
    },
    mounted(){
        this.chosen = this.patList[0]
        this.preChosen = this.patList[0]
    }
}
</script>
<style lang="scss" scoped>
.page{
    margin: 1vh;
    width: 168.5vh;
    height: 87vh;
    box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5);
    .patientsList{
        border-radius: 1px;
        width:35vh;
        height:87vh;
        max-height:87vh;
        overflow-y: scroll;
        box-shadow: 1px 0px 1px 1px rgba(0,0,0,0.5);
        float:left;
    }
   .talkPart{
        float:left;
        border-radius: 1px;
        width:133.5vh;
        height:87vh;
        max-height:87vh;
        box-shadow: 1px 0px 1px 1px rgba(0,0,0,0.5);
        .header{
            border-radius: 1px;
            width:133.5vh;
            height:5vh;
            max-height:5vh;
            box-shadow: 1px 0px 1px 1px rgba(0,0,0,0.5);
            font: 24px black bold;
            padding-top:0.8vh;
            font-family: 'STXinwei';
            text-align: center;
        }
        .mesPart{
            border-radius: 1px;
            width:133.5vh;
            height:52vh;
            max-height:52vh;
            overflow-y: scroll;
            box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.5);
        }
   } 
}
.patName{
    text-align: center;
    padding-top: 1.1vh;
    font-size: 18px;
    font-family: LiSu;
    font-weight: bold;
    color: rgba(82, 183, 255, 0.8);
    height: 6vh;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.patName:hover, .patName_click{
    background-color: rgba(0,0,0,0.05);
    text-align: center;
    padding-top: 1.1vh;
    font-size: 18px;
    font-family: LiSu;
    font-weight: bold;
    color: rgba(82, 183, 255, 0.8);
    height: 6vh;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.mes{
    max-width: 62vh;
    border-radius: 5px;
    border: 1px solid;
    font-size:16px;
    font-family: 'Courier New', Courier, monospace;
    .from{
        border-color:black;
        background-color: rgba(82, 183, 245, 0.1);
        color: white;
    }
    .to{
        border-color:white;
        background-color: rgba(36, 213, 142, 0.892);
        color: black;
    }
}
::-webkit-scrollbar{
    width:10px;
    height:10px;
}
/*正常情况下滑块的样式*/
::-webkit-scrollbar-thumb{
    background-color:rgba(82, 183, 245, 0.2);
    border-radius:10px;
    -webkit-box-shadow:inset 1px 1px 0 rgba(82, 183, 245, 0.1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/
::-webkit-scrollbar-thumb{
    background-color:rgba(82, 183, 245, 0.4);
    border-radius:10px;
    -webkit-box-shadow:inset 1px 1px 0 rgba(82, 183, 245, 0.1);
}
/*鼠标悬浮在滑块上时滑块的样式*/
::-webkit-scrollbar-thumb:hover{
    background-color:rgba(82, 183, 245, 0.8);
    -webkit-box-shadow:inset 1px 1px 0 rgba(82, 183, 245, 0.1);
}
/*正常时候的主干部分*/
::-webkit-scrollbar-track{
    border-radius:10px;
    -webkit-box-shadow:inset 0 0 6px rgba(82, 183, 245, 0);
    background-color:white;
}
/*鼠标悬浮在滚动条上的主干部分*/
::-webkit-scrollbar-track:hover{
    -webkit-box-shadow:inset 0 0 6px rgba(82, 183, 245, 0.4);
    background-color:rgba(82, 183, 245, 0.04);
}
</style>